// import type { ProColumns } from '@ant-design/pro-components';
import {
    EditableProTable,
} from '@ant-design/pro-components';
import React, { useState } from 'react';





const ProEditTableComponent = ({ dataSource = [], setDataSource }) => {
    const [editableKeys, setEditableRowKeys] = useState([]);

    const [position, setPosition] = useState('bottom');



    const columns = [
        {
            title: '字段',
            dataIndex: 'filed',
            width: 140,
            fieldProps: (form, { rowKey, rowIndex }) => {
                if (form.getFieldValue([rowKey || '', 'title']) === '不好玩') {
                    return {
                        disabled: true,
                    };
                }
                if (rowIndex > 9) {
                    return {
                        disabled: true,
                    };
                }
                return {};
            },
        },
        {
            title: '描述',
            dataIndex: 'desc',
            width: 140,
            fieldProps: (form, { rowKey, rowIndex }) => {
                if (form.getFieldValue([rowKey || '', 'title']) === '不好玩') {
                    return {
                        disabled: true,
                    };
                }
                if (rowIndex > 9) {
                    return {
                        disabled: true,
                    };
                }
                return {};
            },
        },

        {
            title: '数据类型',
            key: 'dataType',
            dataIndex: 'dataType',
            valueType: 'select',
            width: 140,
            valueEnum: {
                string: {
                    text: '字符串',
                    status: 'String',
                },
                number: {
                    text: '数字',
                    status: 'Number',
                },
            },
        },
        {
            title: '唯一',
            key: 'unique',
            dataIndex: 'unique',
            valueType: 'select',
            width: 140,
            valueEnum: {
                true: { text: '是', status: "success" },
                false: { text: "否", status: "error" }
            },
        },
        {
            title: '必填',
            key: 'require',
            dataIndex: 'require',
            valueType: 'select',
            width: 140,
            valueEnum: {
                true: { text: '是', status: "success" },
                false: { text: "否", status: "error" }
            },
        },
        {
            title: '索引',
            key: 'index',
            dataIndex: 'index',
            valueType: 'select',
            width: 140,
            valueEnum: {
                true: { text: '是', status: "success" },
                false: { text: "否", status: "error" }
            },
        },
        {
            title: '编辑',
            key: 'edit',
            dataIndex: 'edit',
            valueType: 'select',
            width: 140,
            valueEnum: {
                true: { text: '是', status: "success" },
                false: { text: "否", status: "error" }
            },
        },
        {
            title: '搜索',
            key: 'search',
            dataIndex: 'search',
            valueType: 'select',
            width: 140,
            valueEnum: {
                true: { text: '是', status: "success" },
                false: { text: "否", status: "error" }
            },
        },
        {
            title: '搜索类型',
            key: 'searchValueType',
            dataIndex: 'searchValueType',
            valueType: 'select',
            width: 140,
            valueEnum: {
                Input: {
                    text: 'Input',
                    status: 'Input',
                },
                Select: {
                    text: 'Select',
                    status: 'Select',
                },

            },
        },
        {
            title: '显示',
            key: 'show',
            dataIndex: 'show',
            valueType: 'select',
            width: 140,
            valueEnum: {
                true: { text: '是', status: "success" },
                false: { text: "否", status: "error" }
            },
        },
        {
            title: '操作',
            valueType: 'option',
            width: 200,
            // fixed: "rigfht",
            render: (text, record, _, action) => [
                <a
                    key="editable"
                    onClick={() => {
                        action?.startEditable?.(record.id);
                    }}
                >
                    编辑
                </a>,
                <a
                    key="delete"
                    onClick={() => {
                        setDataSource(dataSource.filter((item) => item.id !== record.id));
                    }}
                >
                    删除
                </a>,
            ],
        },
    ];


    return (
        <>
            <EditableProTable
                rowKey="id"
                headerTitle=""
                // maxLength={5}
                tableStyle={{
                    height: 350
                }}
                recordCreatorProps={
                    position !== 'hidden'
                        ? {
                            position: position,
                            record: () => ({ id: (Math.random() * 1000000).toFixed(0) }),
                        }
                        : false
                }
                loading={false}
                toolBarRender={() => [
                ]}
                scroll={{
                    y: 328
                }}
                columns={columns}
                value={dataSource}
                onChange={setDataSource}
                editable={{
                    type: 'multiple',
                    editableKeys,
                    onSave: async (rowKey, data, row) => {
                        console.log(rowKey, data, row);

                    },
                    onChange: setEditableRowKeys,
                }}
            />

        </>
    );
}
export default ProEditTableComponent;